let shortcutkeyinput = document.querySelector("#shortcutkeyinput");

chrome.storage.sync.get("shortcutKey", function({shortcutKey}) {
  console.log("shortcutKey",shortcutKey)
  shortcutkeyinput.value = shortcutKey.setStr
})

let mapArr = ["CTRL", "SHIFT", "ALT"]
let funKeyEKeyMap = ["Shift", "Control", "Alt"];
let funKeyIsDownMap = ["ctrlKey", "shiftKey", "altKey"]
let saveShortcutKeyTempObj = {
  funKey: [],
  ordinaryKeyCode: null,
  setStr: ""
}
shortcutkeyinput.addEventListener("keydown", function(e) {
  let funKeyIsDownArr = [e.ctrlKey, e.shiftKey, e.altKey];
  
  if(!funKeyIsDownArr.includes(true)) {
    let temp = this.value;
    setTimeout(() => {
      this.value = temp
    })
    return
  };
  let str = "";
  saveShortcutKeyTempObj.funKey = [];
  funKeyIsDownArr.forEach((item, index) => {
    if(item == true) {
      str += `${mapArr[index]} + `;
      saveShortcutKeyTempObj.funKey.push(funKeyIsDownMap[index])
    }
  })
  if(!funKeyEKeyMap.includes(e.key)) {
    str += e.key;
    saveShortcutKeyTempObj.ordinaryKeyCode = e.keyCode;
  }
  this.value = str;
  saveShortcutKeyTempObj.setStr = str;
  e.preventDefault()
})

shortcutkeyinput.addEventListener('blur', function(e) {
  chrome.storage.sync.set({shortcutKey: saveShortcutKeyTempObj})
})